<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('idManage.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('idManage.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <search 
      :searchData="searchData" 
      @search="search" 
      :searchRight="true"></search>
    
    <!-- ------------ 添加账户 -------------- -->
    <div class="list_operation"  v-if="$store.state.common.permiss.menuaccountlist.includes('add')">
      <el-button type="primary" @click="showaddUser(1)">
        +{{$t('idManage.add')}}
      </el-button>
    </div>
    
    <!-- ------------ 表单栏开始 -------------- -->
    <div class="table" >
      <template>
        <el-table :data="tableData" size="small" stripe>
          <el-table-column align="center" prop="id" :label="$t('idManage.id')">
          </el-table-column>
          <el-table-column align="center" prop="userName" :label="$t('idManage.name')">
          </el-table-column>
          <el-table-column align="center" prop="name" :label="$t('idManage.roleId')">
            <template slot-scope="scope">
              <span>{{scope.row.roleDOS.map(value=>value=value.name).join(',')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nickName" :label="$t('public.no1')">
          </el-table-column>
          <el-table-column align="center" prop="telephone" :label="$t('public.no18')">
          </el-table-column>
          <el-table-column align="center" prop="gmtCreate" :label="$t('public.no21')">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="180">
            <template slot-scope="scope">
              <!-- 重置密码 -->
              <span 
                v-if="$store.state.common.permiss.menuaccountlist.includes('reset')"
                class="table_opr"
                @click="modifyPre(scope.row.id,scope.row.userName)">{{$t('idManage.replace')}}</span>
              <!-- 修改 -->
              <span 
                v-if="$store.state.common.permiss.menuaccountlist.includes('edit')"
                class="table_opr"
                @click="showaddUser(2,scope.row.id)">{{$t('public.no51')}}</span>
              <!-- 删除 -->
              <span 
                v-if="$store.state.common.permiss.menuaccountlist.includes('del')"
                class="table_opr"
                @click="delPre(scope.row.id,scope.row.userName)">{{$t('idManage.del')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- -------------- 分页显示栏开始 ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

    <!-- ----------------------确认是否删除开始------------------ -->
    <el-dialog :title="$t('public.no48')" :visible.sync="del" width="550px">
      <div class="left2right">
        <span class="left"></span>
        <span class="right">{{$t('idManage.delRole')}} {{delName}} ？</span>
      </div>
      <div class="left2right mt15">
        <span class="left"></span>
        <span class="right">
          <el-button type="primary" @click="delSure()">{{$t('public.no49')}}</el-button>
        </span>
      </div>
    </el-dialog>
  

    <!-- ------------------ 确认是否修改密码开始 -------------------- -->
    <el-dialog :title="$t('idManage.replace')" :visible.sync="modify" width="550px">
      <div class="left2right">
        <span class="left">{{$t('idManage.no1')}}</span>
        <div class="right">
          <el-input v-model="formModify.loginName" disabled size="small"></el-input>
        </div>
      </div>
      <div class="left2right">
        <span class="left">{{$t('idManage.no2')}}</span>
        <div class="right">
          <el-input v-model="formModify.password" size="small"></el-input>
        </div>
      </div>
      <div class="left2right mt15">
        <span class="left"></span>
        <span class="right">
          <el-button type="primary" @click="modifySure">{{$t('public.no49')}}</el-button>
        </span>
      </div>
    </el-dialog>

    <!-- ----------------------确认是否添加账号开始------------------ -->
    <el-dialog :title="$t('public.no51')" :visible.sync="addOrchange" width="650px">
      <el-form :model="ruleForm2" size="small" status-icon :rules="rules" ref="ruleForm2" label-width="120px">
        <el-form-item :label="$t('idManage.no7')" prop="userName">
            <el-input type="user" v-model="ruleForm2.userName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('idManage.no8')" prop="nickName">
            <el-input type="name" v-model="ruleForm2.nickName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.no18')" prop="telephone">
            <el-input type="tel" v-model="ruleForm2.telephone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('idManage.no10')" prop="password" v-if="stage == 'add'">
            <el-input type="password"
             v-model="ruleForm2.password" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('idManage.no9')" prop="roleId">
            <el-checkbox-group v-model="ruleForm2.roleId">
              <el-checkbox v-for="value in ruleList" :key="value.id" :label="value.id" >{{value.name}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">{{$t('public.no41')}}</el-button>
          <el-button @click="addClose">{{$t('public.no50')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    

    <div class="foot"></div>
  </div>
</template>
<script>
export default {
  name: 'AccountList',
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'idManage.userName',
        attr: 'userName',
        value: ''
      },
      {
        type: 'input',
        label: 'public.no1',
        attr: 'nickName',
        value: ''
      },
      {
        type: 'input',
        label: 'public.no18',
        attr: 'telephone',
        value: ''
      },
      {
        type: 'select',
        label: 'idManage.roleName',
        attr: 'roleId',
        option: [],
        value: '',
        langFlag: false,
      },{
        type: 'rangePicker',
        label: 'public.no21',
        attr: 'beginTime',
        value: [],
      },
    ]
    return {
      flag: true,
      loadFlag: true,
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      formInline: {},// 用户查询信息数据对应字段
      tableData: [],// 表格数据
      searchTime: [], // 搜索栏时间
      formModify: {// 修改密码对应数据
        loginName: '',
        password: ''
      },
      options: [],// roleList下拉框
      del: false, // 删除弹窗
      modify: false, // 修改密码弹窗
      addOrchange: false, // 添加修改账号弹窗
      stage: '',//判断是添加弹窗还是删除弹窗来区分请求地址
      delId: '', // 删除目标行数对应的id
      delName: '', // 删除目标行数对应的名字
      modifyId: '', // 修改目标行数对应的id
      changeId: '', // 修改目标行数对应的id
      ruleForm2: {
        userName: '',
        nickName: '',
        telephone: '',
        password: '123456',
        roleId: []
      },
      rules: {
        userName: [
          { required: true, message: this.$t('login.required'), trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: this.$t('login.required'), trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: this.$t('login.required'), trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        password: [
          { required: true, message: this.$t('login.required'), trigger: 'blur' }
        ],
        
      },
      ruleList: []
    }
  },
  methods: {
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
      this.formInline = {
        userName: search.userName,
        nickName:search.nickName,
        roleId: search.roleId,
        telephone: search.telephone,
        beginTime: search.beginTime?search.beginTime[0]:'',
        endTime: search.beginTime?search.beginTime[1]:''
      };
      this.pagination.current = 1;
      this.getTableData();
    },
    getTableData () { // 获取账号管理列表
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }
      }
      this.$axios.post(this.$action.sysadmin, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    delPre (id,name) { // 删除按钮弹窗
      this.del = true;
      this.delId = id;
      this.delName = name;
    },
    delSure () { // 删除确认操作
      let option = {
        param: {
          id: this.delId,
          status: 0
        }
      }
      this.$axios.post(this.$action.sysadmin_delete, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData()
        } else {
          this.$globalMsg.error(res.message);
        }
        this.del = false;
      })
    },
    modifyPre (id, name) { // 修改按钮弹窗
      this.modify = true;
      this.modifyId = id;
      this.formModify.loginName = name;
    },
    modifyClose () { // 修改弹窗关闭
      this.modify = false;
      this.modifyId = '';
      this.formModify.password = '';
    },
    modifySure () { // 修改密码确认操作
      // eslint-disable-next-line
      let jse = new JSEncrypt();
      jse.setPublicKey(this.$store.state.common.publicKey);
      //   设置需要加密的字符串
      let pass = jse.encrypt(this.formModify.password);
      let option = {
        param: {
          id: this.modifyId,
          password: pass
        }
      }
      this.$axios.post(this.$action.sysadmin_password, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
        } else {
          this.$globalMsg.error(res.message);
        }
        this.modify = false;
      })
    },
    showaddUser (str,id) { // 添加修改账号开关
      if(str==1){
        this.addOrchange = true;
        this.stage = 'add'
      }
      if(str==2){
        this.addOrchange = true;
        this.changePre(id)
        this.stage = 'change'
      }
    },
    addClose () {
      this.addOrchange = false;
      this.ruleForm2 = {
        userName: '',
        nickName: '',
        telephone: '',
        roleId: [],
      }
      this.$refs['ruleForm2'].resetFields();
    },
    changePre (id) {
      this.changeId = id;
      let option = {
        param: {
          id: this.changeId,
        }
      }
      this.$axios.post(this.$action.sysadmin_view, option).then(res => {
        if (res.code == 200) {
          this.ruleForm2.userName = res.data.userName;
          this.ruleForm2.nickName = res.data.nickName;
          this.ruleForm2.telephone = res.data.telephone;
          res.data.roleDOS.forEach(value=>{
            this.ruleForm2.roleId.push(value.id)
          })
          // this.ruleForm2.roleId = res.data.roleId;
        }
      })
    },
    submitForm (formName) {// 修改账号信息操作
      let httpurl = this.$action.sysadmin_add
      // eslint-disable-next-line
      let jse = new JSEncrypt();
      jse.setPublicKey(this.$store.state.common.publicKey);
      //   设置需要加密的字符串
      let pass = jse.encrypt(this.ruleForm2.password);
      let arr = []
      this.ruleForm2.roleId.forEach(ele => {
            arr.push({id:ele})
      })
      let option = {
        param: {
          // partnerId:sessionStorage.partnerId,
          userName: this.ruleForm2.userName,
          nickName: this.ruleForm2.nickName,
          telephone: this.ruleForm2.telephone,
          password: pass,
          roleDOS: arr
        }
      }
      if(this.stage=='change'){
        httpurl = this.$action.sysadmin_update
        option.param.id = this.changeId
        option.param.password = undefined
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post(httpurl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(this.$t('message.success'));
              this.getTableData();
            } else {
              this.$globalMsg.error(res.message);
            }
            this.addClose();
          })
        } else {
          return false;
        }
      })
    },
    getRuleList () { // 获取角色列表
      let option = {
        param: {}
      }
      this.$axios.post(this.$action.sysrole_list, option).then(res => {
        if (res.code == 200) {
          this.ruleList = res.data
          let arr = res.data
          arr.forEach(value=>{
            value.value = value.id
            value.label = value.name
          })
          this.options = arr
          this.searchData.filter(value=>value.attr=='roleId')[0].option = arr
        }
      })
    },
  },
  watch: {
    addOrchange () {
      if (!this.addOrchange) {
        this.addClose()
      }
    }
  },
  mounted () {
    this.getTableData();// 获取账号列表
    // this.getcollectionType();// 获取催收阶段
    // this.getremindTypes();// 获取催收阶段
    this.getRuleList();// 获取角色列表
  }
}
</script>
<style scoped lang="scss">

</style>
